<template>
	<div>
		<el-card style="width: 100%;">
			<template #header>
				<el-form :inline="true" :rules="rules">
					<el-form-item label="名称">
						<el-input v-model="query.name" placeholder="请输入名称......" style="width: 300px;"/>
					</el-form-item>
          <el-form-item label="地区">
            <el-input v-model="query.region" placeholder="请输入地区名称..." style="width: 300px;"/>
          </el-form-item>
					<el-form-item label="分类">
						<el-select v-model="query.type" placeholder="请选择分类" clearable style="width: 300px;">
							<el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">{{item.name}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="时期">
						<el-input v-model="query.period" placeholder="请输入历史时期..." style="width: 300px;"/>
					</el-form-item>
					<el-form-item>
						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
						<el-button type="primary" icon="Search" @click="getList">查询</el-button>
						<el-button type="success" icon="Plus" @click="addGoods(-1)">新增</el-button>
					</el-form-item>
				</el-form>
			</template>

			<el-table :data="list" border empty-text="暂无内容!" style="width: 100%;">
				<el-table-column type="index" width="80" align="center"/>
				<el-table-column prop="name" label="名称"/>
				<el-table-column prop="cover" label="封面" align="center" width="150">
					<template #default="scope">
						<el-image :src="'/api' + scope.row.cover" z-index="999" preview-teleported :preview-src-list="['/api' + scope.row.cover]" style="width: 100px; height: 100px;"/>
					</template>
				</el-table-column>
				<el-table-column label="标签" align="center">
					<template #default="{row}">
						<el-tag type="primary" v-for="item in row.tags">{{item.name}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="分类" align="center" width="100">
					<template #default="{row}">
						<el-tag type="primary">{{row.category.name}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="地区"/>
				<el-table-column label="操作" width="180" align="center">
					<template #default="{row}">
						<div style="width: 100%;" class="flex-item-center flex-ju-spe">
							<el-button type="danger" text icon="Delete" @click="deleteGoods(row.id)">删除</el-button>
							<el-button type="primary" text icon="Edit" @click="addGoods(row.id)">编辑</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<div style="margin-top: 8px; display: flex; justify-content: flex-end">
				<el-pagination background layout="prev, pager, next, total" :total="total" @current-change="pageChange"/>
			</div>
		</el-card>

		<GoodsForm v-model="showForm" :id="currentID" @refresh="getList"/>
	</div>
</template>
<script setup>
import {reactive, ref} from "vue";
import {goodsListApi, goodsDeleteApi} from '@/api/goods.js'
import {typesApi} from '@/api/type.js'
import GoodsForm from './Form.vue'
import {ElMessage, ElMessageBox} from "element-plus";
import gansuOptions from '@/utils/gansu_region_data.js'

const types = ref([])
const list = ref([])
const total = ref(0)
const query = reactive({
	page: 1,
	pageSize: 10,
	name: '',
	type: '',
  region: '',
	period: ''
})

const resetQuery = ()=> {
	query.page = 1
	query.name = ''
	query.type = ''
	query.region = ''
	query.period = ''
	getList()
}

const getList = async ()=> {
	const res = await goodsListApi(query)
	list.value = res.list;
	total.value = res.total
}
getList()

const rules = reactive({
	name: {require: true, message: '请输入名称', trigger: 'blur' },
})

const getTypes = async ()=> {
	const res = await typesApi()
	types.value = res.data
}
getTypes()


const currentID = ref(-1)
const showForm = ref(false)
//打开表单
const addGoods = (id)=> {
	currentID.value = id;
	showForm.value = true;
}

const deleteGoods = async (id)=> {
	const confirm = await ElMessageBox.confirm('确定删除吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
	if (confirm){
		const res = await goodsDeleteApi(id)
		if(res.code === 200) {
			ElMessage.success(res.message)
			await getList()
		}else{
			ElMessage.error(res.message)
		}
	}

}


const pageChange = page => {
  query.page = page
  getList()
}
</script>
<style scoped>

</style>
